<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@3"></script>
  <script src="https://unpkg.com/vue-router@4"></script>
</head>
<body>
  <div id="app"></div>

  <script>
    const app = Vue.createApp({})

    const UserDetails = {
      template: `...`,
      beforeRouteEnter(to, from) {
        // 在渲染该组件的对应路由被验证前调用
        // 不能获取组件实例 this
        // 因为当守卫执行时，组件实例还没被创建
      },
      beforeRouteUpdate(to, from) {
        // 在当前路由改变，但是该组件被复用时调用
        // 举例来说，对于一个带有动态参数的路径 /users/:id，在 /users/1 和 /users/2 之间跳转的时候，由于会渲染同一的 UserDetails 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 this
      },
      beforeRouteLeave(to, from) {
        // 在导航离开渲染该组件的对应路由时调用
        // 与 beforeRouteUpdate 一样，它也可以访问组件实例 this
      }
    }

    const routes = [

    ]

    const router = VueRouter.createRouter({
      // history: createWebHashHistory(), // Hash 模式
      history: createWebHistory(), // HTML5 模式
      routes
    })

    router.beforeEach((to, from) => {
      // ...
      // 返回 false 以取消导航
      return false
    })

    app.use(router)

    app.mount('#app')
  </script>
</body>
</html>